<template lang="pug">
  .yd-dialog-white-mask(@click="hide")
    .yd-toast(:class="toastClass" :style="toastStyle")
      div(v-if="iconsClass" :class="iconsClass")
      p.yd-toast-content(v-html="msg")
</template>

<script type="text/babel">
export default {
  props: {
    msg: String,
    icon: String,
    type: String,
    timeout: Number,
    bgcolor: String,
    callback: Function
  },
  computed: {
    toastClass() {
      let toastType = this.type ? `toast-${this.type}` : ''
      let hasIcon = this.iconsClass === '' ? 'yd-toast-none-icon' : ''
      return `${toastType} ${hasIcon}`
    },
    toastStyle () {
      let style = this.bgcolor ? `background-color: ${this.bgcolor};` : ''
      if (this.color) { style += `color: ${this.color};` }
      return style
    },
    iconsClass() {
      let _icon = ''
      if (this.icon === 'success' || this.icon === 'error') {
        _icon = 'yd-toast-' + this.icon + '-icon'
      }
      return _icon
    }
  },
  methods: {
    hide () { this.$emit('closeToast') }
  }
}
</script>

<style lang="stylus">
@import '~assets/stylus/variables.styl'
.yd-dialog-white-mask
  position: fixed
  top 0
  z-index: 10000
  width 100vw
  height 100vh
  background rgba(0, 0, 0, .3)
.yd-toast
  padding .75rem 1rem
  text-align center
  color $color-white
  background: $color-primary
.toast-info
  background-color $color-info
.toast-succ
  background-color $color-success
.toast-warn
  background-color $color-warning
.toast-error
  background-color $color-danger
</style>
